<template>
  <div id="app">
    <el-cascader
      :value="value"
      size="mini"
      style="width: 300px;"
      :options="options"
      separator="-"
      :props="{label:'name',value:'id'}"
      @change="$emit('input',$event[$event.length - 1])"
    />
    <!-- 1.separator连接符默认是/ -->
    <!-- 2.option有两个数据label是每一项的名字，value是每一项的追，一般是id，如果后台返回的名字不是label和value用 :props:{修改属性名} -->
    <!-- 3.change事件的事件对象是一个数组，数组里面是每个嵌套的id -->
  </div>
</template>

<script>
import { getDepartmentListAPI } from '@/api/department'
import { convertToTree } from '@/utils'
// 级联选择器value是他选中的数据，就是传送部门id给他他们默认选中
export default {
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      options: []
    }
  },
  async created() {
    const { data } = await getDepartmentListAPI()
    // convertToTree(data)
    this.options = convertToTree(data)
  }
}
</script>

<style>

</style>
